
<link type="text/css" rel="stylesheet" href="styles/pestanyas.css">
<script type="text/javascript" src="jslib/jquery.cycle.all.2.72.js"></script>
<script>
    //script per carrega les pestanyes
    $(document).ready(function() {
        //Cuando el sitio carga...
        $(".tab_content").hide(); //Esconde todo el contenido
        $("ul.tabs li:first").addClass("active").show(); //Activa la primera tab
        $(".tab_content:first").show(); //Muestra el contenido de la primera tab
        //On Click Event
        $("ul.tabs li").click(function() {
            $("ul.tabs li").removeClass("active"); //Elimina las <a title="clases" href="http://www.cssblog.es/css-el-atributo-class/">clases</a> activas
            $(this).addClass("active"); //Agrega la clase activa a la tab seleccionada
            $(".tab_content").hide(); //Esconde todo el contenido de la tab
            var activeTab = $(this).find("a").attr("href"); //Encuentra el valor del atributo href para identificar la tab activa + el contenido
            $(activeTab).fadeIn(); //Agrega efecto de transición (fade) en el contenido activo
            return false;
        });
    });

    //script que carrega el contingut de la primer pestanya
    $(document).ready(function() {
        $('.slideshow').cycle({
            fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc…
            timeout: 500,
            after: function(currSlideElement, nextSlideElement, options, forwardFlag){ cambiartitul('#titinfra',$(currSlideElement).attr("src"));},
            speed: 500
        });
        $('.slideshow2').cycle({
            fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc…
            timeout: 500,
            after: function(currSlideElement, nextSlideElement, options, forwardFlag){ cambiartitul('#titvis',$(currSlideElement).attr("src"));},
            speed: 500
        });
    });
    //funcio per carrega les transicions de imatges
    function cambiapes(opcio){
        $('.slideshow').cycle('destroy');$('.slideshow2').cycle('destroy'); $('.slideshow3').cycle('destroy');$('.slideshow4').cycle('destroy');
        //segons la pestanya
        switch(opcio){
            case 1:        $('.slideshow').cycle({
                    fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc…
                    timeout: 500,
                    after: function(currSlideElement, nextSlideElement, options, forwardFlag){ cambiartitul('#titinfra',$(currSlideElement).attr("src"));},
                    speed: 500
                });
                $('.slideshow2').cycle({
                    fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc…
                    timeout: 500,
                    after: function(currSlideElement, nextSlideElement, options, forwardFlag){ cambiartitul('#titvis',$(currSlideElement).attr("src"));},
                    speed: 500
                });
                ;break;
            case 4:$('.slideshow4').cycle({
                    fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc…
                    timeout: 500,
                    after: function(currSlideElement, nextSlideElement, options, forwardFlag){
                        $('#titiso').html("");
                        var fitxer=GetFilename($(currSlideElement).attr("src"));
                        var any=fitxer.substr(25,4);
                        var mes=fitxer.substr(29,2);
                        var dia=fitxer.substr(31,2);
                        var hora=fitxer.substr(34,2);
                        var min=fitxer.substr(36,2);
                        $('#titiso').append(dia +"-"+mes+"-"+any+" "+hora+":"+min);
                    },
                    speed: 500
                });
                break;
            case 5: $('.slideshow3').cycle({
                    fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc…
                    timeout: 500,
                    after: function(currSlideElement, nextSlideElement, options, forwardFlag){
                        $('#tittmp').html("");
                        var fitxer=GetFilename($(currSlideElement).attr("src"));
                        var any=fitxer.substr(18,4);
                        var mes=fitxer.substr(22,2);
                        var dia=fitxer.substr(24,2);
                        var hora=fitxer.substr(27,2);
                        var min=fitxer.substr(29,2);
                        $('#tittmp').append(dia +"-"+mes+"-"+any+" "+hora+":"+min);
                    },
                    speed: 500
                });break;
        }
    }
    //funcio que retorna el nom de fitxer de una ruta web
    function GetFilename(url)
    {
        if (url)
        {
            var m = url.toString().match(/.*\/(.+?)\./);
            if (m && m.length > 1)
            {
                return m[1];
            }
        }
        return "";
    }
    //funcio que canvia el titul de cada imatge per canviar la hora de la imatge, aquesta funcio s'activa cada cop que es canvia la imatge
    //amb el visualitzador d'imatges
    function cambiartitul(element,url){
        $(element).html("");
        var fitxer=GetFilename(url);
        var any=fitxer.substr(0,4);
        var mes=fitxer.substr(4,2);
        var dia=fitxer.substr(6,2);
        var hora=fitxer.substr(8,2);
        var min=fitxer.substr(10,2);
        $(element).append(dia +"-"+mes+"-"+any+" "+hora+":"+min);
    }
</script>
<h1>Previsió Meteorologica</h1>
<br/>
<?php
include('conexio.php');
if($con) {
//comprovem la previsio meteorologica per les proximes 12h
    $select="select * from previsio" . date("Y");
    $res=mysql_query($select);
    $fila=mysql_fetch_array($res);
    switch($fila["previsio"]/1) {
        case 3:$imatge='sol.gif';
            break;
        case 2:$imatge='sol_y_nubes.png';
            break;
        case 0:$imatge='lluvia.gif';
            break;
        case 1:$imatge='nubes.png';
            break;

    }

    ?>
<table class="taula">
    <tr>
        <td class="camp">La previsió per les proximes 12h</td>
    </tr>
    <tr>
        <td class="valor" style="padding:0px;"><img src="images/previsio/<?php echo $imatge;?>"</td>
    </tr>
</table>
<!--pestanyes-->
<ul class="tabs">
    <li><a href="#tab1" onclick="cambiapes(1)">Infraroig/Visible</a></li>
    <li><a href="#tab3" onclick="cambiapes(3)">Radar</a></li>
    <li><a href="#tab2" onclick="cambiapes(2)">Llamps</a></li>
    <li><a href="#tab4" onclick="cambiapes(4)">Isòbares</a></li>
    <li><a href="#tab5" onclick="cambiapes(5)">Temperatures</a></li>
</ul>
<div class="tab_container">
    <!--Pestanya infraroig/visible-->
    <div id="tab1" class="tab_content">
            <?php $noticias2 = simplexml_load_file('http://www.3cat24.cat/flash_dinamic/meteo/xml/Satelit_Catalunya_IR.xml'); ?>
            <?php $noticias = simplexml_load_file('http://www.3cat24.cat/flash_dinamic/meteo/xml/Satelit_Catalunya_VIS.xml'); ?>
        <table class="taula" width="100%">
            <tr><td class="sub">Infraroig</td><td class="sub">Canal Visible</td></tr>
            <tr><td class="valor" width="50%" style="padding:0px;height:390px;">
                    <div class="slideshow">
                            <?php

                            foreach ($noticias2->Satelit->Ficheros->Fichero as $notici) {
                                ?><img height="365px" src="<?php echo "http://www.3cat24.cat/img/meteo/mapes/Mapes_animats/Catalunya/Satelit/" . $notici->Nombre;?>"/>
                                <?php
                            }    ?>
                    </div>
                    <h1 id="titinfra" style="margin-bottom:0px;"></h1>
                </td>
                <td class="valor" width="50%" style="padding:0px;">
                    <div class="slideshow2">
                            <?php

                            foreach ($noticias->Satelit->Ficheros->Fichero as $noticia) {
                                ?><img height="365px" src="<?php echo "http://www.3cat24.cat/img/meteo/mapes/Mapes_animats/Catalunya/Satelit/" . $noticia->Nombre;?>" />
                                <?php
                            }    ?>
                    </div>
                    <h1 id="titvis" style="margin-bottom:0px;"></h1>
                </td>
            </tr>
        </table>
    </div>
    <!--pestanya Temperatures-->
    <div id="tab5" class="tab_content">
            <?php $noticias3 = simplexml_load_file('http://www.3cat24.cat/flash_dinamic/meteo/xml/Temperatura_Europa.xml'); ?>
        <table class="taula" width="60%">
            <tr><td class="sub">Temperatures</td></tr>
            <tr><td class="valor" width="50%" style="padding:0px;height:470px;">
                    <div class="slideshow3">
                            <?php

                            foreach ($noticias3->Precipitacio->Ficheros->Fichero as $notici) {
                                ?><img  height="435px" src="<?php echo "http://www.3cat24.cat/img/meteo/mapes/Mapes_animats/Europa/Temperatures/" . $notici->Nombre;?>"/>
                                <?php
                            }    ?>

                    </div>
                    <h1 id="tittmp" style="margin-bottom:0px;"></h1>
                </td>
            </tr>
        </table>
    </div>
    <!--LLamps-->
    <div id="tab2" class="tab_content">
        <table class="taula" width="100%">
            <tr>
                <td class="sub">Llamps d'avui</td>
                <td class="sub">Llamps d'ahir</td>
            </tr>
            <tr>
                <td class="valor" style="padding:0px;">
                    <img src="http://www.meteocat.com/mediamb_xemec/servmet/llamps/mapa_llamps_avui.png" width="100%">
                </td>
                <td class="valor" style="padding:0px;">
                    <img src="http://www.meteocat.com/mediamb_xemec/servmet/llamps/mapa_llamps_ahir.png" width="100%">
                </td>
            </tr>
        </table>
    </div>
    <!--Radar-->
    <div id="tab3" class="tab_content">
        <table class="taula" width="100%">
            <tr>
                <td class="sub">Precipitació d'avui</td>
            </tr>
            <tr>
                <td class="valor" style="padding:0px;">
                    <img src="http://www.meteocat.com/mediamb_xemec/servmet/radar/graf/BCN/BCNC1Gdarrera.gif" width="100%">
                </td>                
            </tr>
        </table>
    </div>
    <!--Isobares-->
    <div id="tab4" class="tab_content">
            <?php $noticias4 = simplexml_load_file('http://www.3cat24.cat/flash_dinamic/meteo/xml/Isobaric_Europa.xml'); ?>
        <table class="taula" width="60%">
            <tr><td class="sub">Mapa Isobàric</td></tr>
            <tr><td class="valor" width="50%" style="padding:0px;height:470px;">
                    <div class="slideshow4">
                            <?php

                            foreach ($noticias4->Precipitacio->Ficheros->Fichero as $notici) {
                                ?><img height="435px" src="<?php echo "http://www.3cat24.cat/img/meteo/mapes/Mapes_animats/Europa/Isobaric/" . $notici->Nombre;?>"/>
                                <?php
                            }    ?>
                    </div>
                    <h1 id="titiso" style="margin-bottom:0px;"></h1>
                </td>
            </tr>
        </table>
    </div>
</div>
    <?php
}else
    include('error.php');
?>
